<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>书籍汇总</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
    <style>
        .layui-table-body .layui-table-cell {
            height: 74px; line-height: 60px;
        }
        .layui-btn-group .layui-btn{
            padding: 0px 10px;
            height: 35px;
            line-height: 35px;
            font-size: 15px; }
        .layui-btn-cur{ background-color: #009688; color: #fff;}
        .layui-card span[lay-separator] {
            margin: 0 10px;
            color: #999;
            font-weight: bold;
        }
    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">

        <div lay-filter="listSearch" class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">

                {neq name="role_name" value="channel"}
                <div class="layui-inline">
                    <select name="channel_id" lay-search>
                        <option value="0">请选择投放号</option>
                        {volist name="channels" id="v"}
                        <option value="{$v.id}">{$v.account}</option>
                        {/volist}
                    </select>
                </div>
                {/neq}

                <div class="layui-inline">
                    <input type="text" name="nid" placeholder="书籍ID" autocomplete="off" class="layui-input">
                </div>

                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-list-front-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                    <button type="button" class="layui-btn layui-btn-primary" lay-submit lay-filter="LAY-reset">重置</button>
                </div>

            </div>

        </div>


        <div class="layui-card-body">

            <table class="layui-table">
                <colgroup>
                    <col>
                    <col>
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th style="text-align: center">数据汇总</th>
                    <th style="text-align: center">历史总消耗</th>
                    <th style="text-align: center">历史总充值</th>
                    <th style="text-align: center">历史回收率</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td align="center">总计</td>
                    <td align="center" class="total_cost">0</td>
                    <td align="center" class="total_recharge">0</td>
                    <td align="center" class="total_recovery_rate">0%</td>
                </tr>
                </tbody>
            </table>

            <table id="LAY-list-manage" lay-filter="LAY-list-manage"></table>

            <script type="text/html" id="catTpl">
                <p style="line-height: 24px;">
                    <span style="text-align: left;width: 100%;display:inline-block">
                    {{ d.freq_name }}
                    </span>
                    <br>
                    <span style="text-align: left;width: 100%;display:inline-block">{{ d.cat_name }}</span>
                    <br>
                    <span style="text-align: left;width: 100%;display:inline-block">{{ d.cat_name_son }}</span>
                </p>
            </script>

        </div>
    </div>
</div>

<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','table','admin'], function(){
        var $ = layui.$
            ,form = layui.form
            ,admin = layui.admin
            ,table = layui.table;

        //监听搜索
        form.on('submit(LAY-list-front-search)', function(data){
            var field = data.field;

            //执行重载
            //执行重载
            table.reload('LAY-list-manage', {
                where: field
                ,page: {
                    curr: 1  // 将页码重置为第一页
                }
            });
        });

        form.on('submit(LAY-reset)', function(data){
            var field = data.field;
            form.val("listSearch", {
                "channel_id": "0",
                "nid" : ''
            });

            form.render();

            table.reload('LAY-list-manage', {
                where: {"channel_id": "0","nid" : ''}
                ,page: {
                    curr: 1  // 将页码重置为第一页
                }
            });
        });

        table.render({
            elem: '#LAY-list-manage'
            , url: "{:url('AdvertStatistics/book_summary_data')}" //模拟接口
            , response: {
                statusCode: 1 //规定成功的状态码，本来是：0，现在统一改为1
            }
            , page: true //开启分页
            , limit: 20
            , cols: [[
                {field: 'report_date', title: '日期',align: 'center'}
                , {field: 'bookname', title: '推广书籍',align: 'center'}
                , {field: 'new_user_num', title: '新用户',sort: true,align: 'center'}
                , {field: 'accumulated_recharge_money', title: '充值金额',sort: true,align: 'center'}
                , {field: 'cost', title: '成本',sort: true,align: 'center'}
                , {field: 'profit', title: '利润',sort: true,align: 'center'}
                , {field: '', title: '书籍类型',templet: '#catTpl',align: 'center'}
                , {field: 't1', title: 'T+0',align: 'center'}
                , {field: 't2', title: 'T+1',align: 'center'}
                , {field: 't3', title: 'T+2',align: 'center'}
                , {field: 't4', title: 'T+3',align: 'center'}
                , {field: 't5', title: 'T+4',align: 'center'}
                , {field: 't6', title: 'T+5',align: 'center'}
            ]]
            ,done: function(res, curr, count){
                $('.total_cost').html(res.summary.total_cost);
                $('.total_recharge').html(res.summary.total_recharge);
                $('.total_recovery_rate').html(res.summary.total_recovery_rate);
            }
        });

        //触发排序事件
        table.on('sort(LAY-list-manage)', function(obj){

            table.reload('LAY-list-manage', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    field: obj.field //排序字段
                    ,order: obj.type //排序方式
                }
                ,page: {
                    curr: 1  // 将页码重置为第一页
                }
            });

        });

    });
</script>
</body>
</html>